<template>
	<!-- 名人馆 -->
	<view class="celebritylist">
		<view>
			<!-- <view class="embassy" :style="'padding-top:'+ (statusBarHeight+60) +'rpx'"> -->
				<!-- <view class="embassy_img" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20231030/57f3cf74ce2b209498.png)'}"></view> -->
			<!-- 	<view class="embassy_nav">
					<view class="nav_text" v-if="nav_active!=1" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20231030/4e40d61de280af3a67.png)'}" @tap="tabnav(1)"></view>
					<view class="nav_text_a" v-if="nav_active==1" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20231030/10b407e94a708d92e7.png)'}"></view>
					<view class="nav_text" v-if="nav_active!=2" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20231030/c463cc1c7711b05f82.png)'}" @tap="tabnav(2)"></view>
					<view class="nav_text_a" v-if="nav_active==2" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20231030/71ae49a7a424e0ef27.png)'}"></view>
					<view class="nav_text_small" v-if="nav_active!=3" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20231030/13e2dafcbd48f1bf0f.png)'}" @tap="tabnav(3)"></view>
					<view class="nav_text_smalla" v-if="nav_active==3" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20231030/785fc8f963783c29ce.png)'}"></view>
				</view> -->
			<!-- </view> -->
			<!-- 顶部tab -->
			<view class="anchor">
				<dropdownmenu
				    :zIndex="89"
				    @toggleItem="toggleItem(2)"
				    ref="dropdown1"
				    active-color="#ee0a24"
				>
				  <dropdownitem :options="optionone" v-model="type_label" @change="changeone" name="first"></dropdownitem>
				  <dropdownitem :options="optiontwo" v-model="tab_actives" @change="changetwo" name="two"></dropdownitem>
				</dropdownmenu>
				
			</view>
		</view>		
		
		<scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="width: 100%;" @scrolltolower="upper" :style="{height: WinHeight-80+'px'}"  >
		<view class="celebritydata" :style="'padding-top:'+ (30) +'rpx'">
			<view @tap="getdetailes(item)" class="celebritydata_item" v-for="(item,index) in celebritylistdata" :key="index">
				<image class="celebritydata_item_img" :src="photo_cdn+item.photo" mode="aspectFill"></image>
				<view class="celeitem_right flex1">
					<view class="celeitem_name">{{item.name}}</view>
					<view class="celeitem_info twoline">{{item.ext3}}</view>
				</view>
			</view>
		</view>
		</scroll-view>	
		
		<ypickerview ref="ypickerview" @changpicker="changpicker"></ypickerview>
		<!-- 五级联动选择 -->
		<!-- <empty v-if="!celebritylistdata.length"></empty> -->
		<!-- <q-tabbar :active="0" :count="[0,0,0,0,0]"></q-tabbar> -->
	</view>
</template>

<script>
	import {celebrityList} from "@/utils/api/celebrity.js";
	import config from "@/utils/config.js";
	import ypickerview from "@/components/ypickerview/ypickerview.vue";
	import dropdownmenu from "@/components/dropdownmenu/dropdownmenu.vue";
	import dropdownitem from "@/components/dropdownitem/dropdownitem.vue";
	let {
		photo_cdn
	} = config.baseUrl;
	import {
		getUserinfo,authorWechat
	} from "@/utils/api/api.js";
	export default {
		components:{
			ypickerview,
			dropdownmenu,
			dropdownitem
		},
		props: {
			idtype: {
				type:String,
				default(){
					return;
				}
			},
		}, 
		data(){
			return {
				photo_cdn,
				nav_active:3,
				statusBarHeight: 0, //通知栏高度
				tab_actives:1,
				type_label:1,
				tablist:[
					{name:"全部",id:1},
					{name:"同姓",id:2},
					{name:"同省",id:3},
					{name:"同市",id:4},
				],
				celebritylistdata:[],
				isshowall:false,
				page:0,
				area_obj:{},

				optiontwo:[
					{text:"全部",value:1},
					{text:"同姓",value:2},
					{text:"同省",value:3},
					{text:"同市",value:4},
				],
				optionone: [
					{
						text: '千古流芳',
						value: 1
					},
					{
						text: '当代名人',
						value: 2
					},
				],
				WinHeight:500,
			}
		},
		watch:{
			idtype: { 
				handler(value) {
					if(value == 'nav3'){
						//获取设备高度
						this.WinHeight = uni.getWindowInfo().windowHeight - 30 ;
						this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
						this.getUserinfofun();
						this.celebrityListfun();
					}
				}
			}
		},
		created() {
			//获取设备高度
			this.WinHeight = uni.getWindowInfo().windowHeight - 30 ;
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
			this.getUserinfofun();
			this.celebrityListfun();
		},
		async onLoad(option) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
			await this.getUserinfofun();
			this.celebrityListfun();
		},
		onReachBottom() {
			if(!this.isshowall){
				this.celebrityListfun();
			}
		},
		methods:{
			toggleItem(val) {
				// this.$refs.dropdown1.close()
			},
			upper: function(e) {
				console.log(e)
				this.celebrityListfun();
			},
			close() {
				this.$refs.dropdown1.close()
			},
			//切换 在的和不在的
			changeone(val) {
				console.log('===========', val, this.type_label)
				this.page = 0;
				this.isshowall = false;
				this.celebritylistdata = [];
				this.celebrityListfun();
			},
			//切换城市范围
			changetwo(val){
				console.log('===========', val, this.tab_actives)
				// this.tab_actives
				this.taggletab();
			},
			
			async getUserinfofun() {
				let res  = await getUserinfo({
			
				})
				if(res.code==1){
					this.userInfo = res.data.userinfo;
					uni.setStorageSync("u_userInfo", res.data.userinfo);
					
					this.area_obj = {
						province_id:res.data.userinfo.province_id,
						city_id:res.data.userinfo.city_id,
						area_id:res.data.userinfo.area_id,
						town_id:res.data.userinfo.town_id,
						village_id:res.data.userinfo.village_id,
					};
				}
			},
			changpicker(data){
				console.info('data',data);
				this.area_obj = {
					province_id:data.checkArr[0],
					city_id:data.checkArr[1],
					area_id:data.checkArr[2],
					town_id:data.checkArr[3],
					village_id:data.checkArr[4],
				};
				this.page = 0;
				this.isshowall = false;
				this.celebritylistdata = [];
				this.celebrityListfun();
			},
			taggletab(){
				
				this.page = 0;
				this.isshowall = false;
				this.celebritylistdata = [];
				
				if(this.tab_actives>1){
					console.info('this.area_obj',this.area_obj);
					if(this.area_obj.province_id){
						this.celebrityListfun();
					}else{
						this.$showModal({
						    title:'温馨提示',
						    concent:'我们需要获取你的位置信息，来获取对应区域的内容',
						    confirmVal:'继续',
							delCancel:true,
						    cancelVal:'拒绝',
						}).then(res=>{
							// this.$refs.ypickerview.show();//弹窗框框
							uni.navigateTo({
								url:"/pages/mine/editinfo/editinfo"
							})
						}).catch(()=>{
						   //拒绝了~~
						   //拒绝了
						})
					}
				}else{
					this.celebrityListfun();
				}
			},
			getdetailes(item){
				if(item.ext0==1){
					uni.navigateTo({
						url:`/pages/celebrity/celebritydetaile/celebritydetaile?people_id=${item.id}`
					})
				}else if(item.ext0==0){
					uni.navigateTo({
						url:`/pages/celebrity/celebritylife/celebritylife?people_id=${item.id}`
					})
				}
			},
			celebrityListfun(){
				this.page++,
				celebrityList({
					page:this.page,
					type:this.tab_actives,
					...this.area_obj,
					type_label:this.type_label
				}).then((res)=>{
					if(res.code==1){
						this.celebritylistdata = [...this.celebritylistdata,...res.data]
						if(res.data.length==0){
							this.isshowall = true;
						}
					}
				})
			},
			tablife(item){
				if(this.type_label==item){
					return false;
				}
				this.type_label = item;
				this.page = 0;
				this.isshowall = false;
				this.celebritylistdata = [];
				this.celebrityListfun();
			},
			//tab切换
			tabnav(item){
				if(this.nav_active==item){
					return false;
				}else{
					this.nav_active = item
				}
				if(this.nav_active==1){
					uni.switchTab({
						url:'/pages/index/index'
					})				
				}
				if(this.nav_active==2){
					uni.redirectTo({
						url:'/pages/zupu/findpu/findpu'
					})				
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "./celebritylist.scss";
</style>